<template>
  <div>
    <!-- v-show="selectionList.length == 0 && crmType != 'customer'" -->
    <flexbox class="th-container">
      <div v-if="!isSeas">场景：</div>
      <el-popover
        v-if="!isSeas"
        trigger="click"
        popper-class="no-padding-popover"
        v-model="showScene"
        width="150"
      >
        <flexbox slot="reference">
          <div class="condition_title">
            {{ sceneData.name || getDefaultSceneName() }}
          </div>
          <i class="el-icon-arrow-down el-icon--right" style="color: #777"></i>
        </flexbox>
        <scene-list
          ref="sceneList"
          :crmType="crmType"
          @scene="sceneSelect"
          @scene-handle="sceneHandle"
          @hidden-scene="showScene = false"
        ></scene-list>
      </el-popover>
      <img
        @click="showFilterClick"
        class="c-filtrate"
        :style="{ 'margin-left': isSeas ? 0 : '30px' }"
        src="@/assets/img/c_filtrate.png"
      />
      <div class="condition_title" @click="showFilterClick">高级筛选</div>
      <filter-form
        :fieldList="fieldList"
        :dialogVisible.sync="showFilter"
        :obj="filterObj"
        :crmType="crmType"
        :isSeas="isSeas"
        @filter="handleFilter"
      >
      </filter-form>
    </flexbox>
    <flexbox v-if="selectionList.length > 0" class="selection-bar">
      <div class="selected—title">
        已选中<span class="selected—count">{{ selectionList.length }}</span
        >项
      </div>
      <flexbox class="selection-items-box">
        <flexbox
          class="selection-item"
          v-for="(item, index) in getSelectionHandleItemsInfo()"
          :key="index"
          @click.native="selectionBarClick(item.type)"
        >
          <img class="selection-item-icon" :src="item.icon" />
          <div class="selection-item-name">{{ item.name }}</div>
        </flexbox>
      </flexbox>
    </flexbox>
    <filter-content
      v-if="filterObj.form && filterObj.form.length > 0"
      :obj="filterObj"
      @delete="handleDeleteField"
    >
    </filter-content>

    <transfer-handle
      :crmType="crmType"
      :selectionList="selectionList"
      @handle="handleCallBack"
      :dialogVisible.sync="transferDialogShow"
    ></transfer-handle>
    <teams-handle
      :crmType="crmType"
      :title="teamsTitle"
      :selectionList="selectionList"
      @handle="handleCallBack"
      :dialogVisible.sync="teamsDialogShow"
    ></teams-handle>
    <alloc-handle
      :crmType="crmType"
      :selectionList="selectionList"
      @handle="handleCallBack"
      :dialogVisible.sync="allocDialogShow"
    ></alloc-handle>

    <scene-set
      :dialogVisible.sync="showSceneSet"
      @save-success="updateSceneList"
      :crmType="crmType"
    >
    </scene-set>

    <scene-create
      :fieldList="fieldList"
      :crmType="crmType"
      :dialogVisible.sync="showSceneCreate"
      @saveSuccess="updateSceneList"
      :obj="sceneFilterObj"
    >
    </scene-create>
  </div>
</template>

<script type="text/javascript">
import { mapGetters } from "vuex";
import {
  filterIndexfields,
  crmSceneSave,
  accountPicking
} from "@/api/customermanagement/common";
import {
  crmLeadsTransform,
  crmLeadsExcelExport,
  crmLeadsDelete
} from "@/api/customermanagement/clue";
import {
  crmCustomerLock,
  crmCustomerPutInPool,
  crmCustomerExcelExport,
  crmCustomerPoolExcelExportAPI,
  crmCustomerDelete,
  crmCustomerPrivateReceive,
  crmCustomerReceive,
  crmWoPicking
} from "@/api/customermanagement/customer";
import {
  crmContactsExcelExport,
  crmContactsDelete
} from "@/api/customermanagement/contacts";
import { crmBusinessDelete } from "@/api/customermanagement/business";
import { crmContractDelete } from "@/api/customermanagement/contract";
import { crmReceivablesDelete } from "@/api/customermanagement/money";
import {
  crmProductExcelExport,
  crmProductStatus
} from "@/api/customermanagement/product";

import filterForm from "./filterForm";
import filterContent from "./filterForm/filterContent";
import SceneList from "./sceneForm/SceneList"; // 场景
import SceneSet from "./sceneForm/SceneSet"; // 场景设置
import SceneCreate from "./sceneForm/SceneCreate";

import TransferHandle from "./selectionHandle/TransferHandle"; // 转移
import TeamsHandle from "./selectionHandle/TeamsHandle"; // 操作团队成员
import AllocHandle from "./selectionHandle/AllocHandle"; // 公海分配操作

export default {
  name: "CRM-table-head", //客户管理下 重要提醒 回款计划提醒
  components: {
    filterForm,
    filterContent,
    SceneList,
    TransferHandle,
    TeamsHandle,
    AllocHandle,
    SceneCreate,
    SceneSet
  },
  computed: {
    ...mapGetters(["crm", "CRMConfig"])
  },
  data() {
    return {
      sceneTypes: [
        {
          type: "enter",
          name: "我负责的"
        },
        {
          type: "out",
          name: "我"
        }
      ],
      sceneType: null,
      showScene: false, // 场景操作
      showFilter: false, // 控制筛选框
      fieldList: [],
      filterObj: {
        form: []
      }, // 筛选确定数据

      sceneData: {
        id: "",
        bydata: "",
        name: ""
      },
      showSceneSet: false, // 展示场景设置
      showSceneCreate: false, // 展示场景添加
      sceneFilterObj: {
        form: []
      }, // 筛选确定数据

      /** 勾选操作数据 */
      selectionList: [],
      transferDialogShow: false,
      teamsDialogShow: false, // 团队操作提示框
      teamsTitle: "", // 团队操作标题名
      allocDialogShow: false // 公海分配操作提示框
    };
  },
  watch: {},
  props: {
    title: {
      type: String,
      default: ""
    },
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: ""
    },
    // 用于区分 订单 工单库 成交库
    type: {
      type: String,
      default: ""
    },
    // 辅助 使用 公海没有场景
    isSeas: {
      type: Boolean,
      default: false
    }
  },
  mounted() {},
  methods: {
    /** 发布 时候的类型选择 */
    handleTypeDrop(command) {
      this.sceneType = command;
    },
    /** 展示高级筛选 */
    showFilterClick() {
      this.getFilterFieldInfo();
    },
    // 获取高级筛选字段数据
    getFilterFieldInfo() {
      filterIndexfields({
        types: "crm_" + this.crmType
      })
        .then(res => {
          this.fieldList = res.data;
          this.showFilter = true;
        })
        .catch(() => {});
    },
    handleFilter(form) {
      this.filterObj = form;
      this.showFilter = false;
      if (form.saveChecked) {
        crmSceneSave({
          types: "crm_" + this.crmType,
          is_default: form.saveDefault ? 1 : 0,
          name: form.saveName,
          data: form.obj
        })
          .then(res => {
            this.updateSceneList();
          })
          .catch(() => {});
      }
      this.$emit("filter", form.obj);
    },
    //删除
    handleDeleteField(data) {
      this.filterObj = data.obj;
      this.$emit("filter", this.filterObj.obj);
    },
    // 场景操作
    /** 选择了场景 */
    sceneSelect(data) {
      this.sceneData = data;
      this.$emit("scene", data);
    },
    sceneHandle(data) {
      if (data.type == "set") {
        this.showSceneSet = true;
      } else if (data.type == "add") {
        filterIndexfields({
          types: "crm_" + this.crmType
        })
          .then(res => {
            this.fieldList = res.data;
            this.showSceneCreate = true;
          })
          .catch(() => {});
      }
    },
    /**  创建保存成功 */
    updateSceneList() {
      this.$refs.sceneList.getSceneList();
    },
    /** 勾选后的表头操作 */
    headSelectionChange(array) {
      this.selectionList = array;
    },
    /** 操作 */
    selectionBarClick(type) {
      if (type == "transfer") {
        // 转移
        this.transferDialogShow = true;
      } else if (type == "export") {
        let params = {
          scene_id: this.scene_id
        };

        let request;
        // 公海的请求
        if (this.isSeas) {
          request = crmCustomerPoolExcelExportAPI;
        } else {
          request = {
            customer: crmCustomerExcelExport,
            leads: crmLeadsExcelExport,
            contacts: crmContactsExcelExport,
            product: crmProductExcelExport
          }[this.crmType];
        }
        params[this.crmType + "_id"] = this.selectionList.map(item => {
          return item[this.crmType + "_id"];
        });
        request(params)
          .then(res => {
            var blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=utf-8"
            });
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download =
              decodeURI(
                res.headers["content-disposition"].split("filename=")[1]
              ) || ""; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          })
          .catch(() => {});
      } else if (
        type == "transform" ||
        type == "put_seas" ||
        type == "delete" ||
        type == "lock" ||
        type == "unlock" ||
        type == "start" ||
        type == "disable" ||
        type == "get" ||
        type == "transferGet" ||
        type == "picking" ||
        type == "accounting"
      ) {
        var message = "";
        if (type == "transform") {
          message = "确定将这些线索转换为客户吗?";
        } else if (type == "put_seas") {
          message = "确定转移到公海吗?";
        } else if (type == "delete") {
          message = "确定要删除这些数据吗?";
        } else if (type == "lock") {
          message = "确定要锁定这些客户吗？锁定后将不会掉入公海。";
        } else if (type == "unlock") {
          message = "确定要解锁这些客户吗？";
        } else if (type == "start") {
          message = "确定要上架这些产品吗?";
        } else if (type == "disable") {
          message = "确定要下架这些产品吗?";
        } else if (type == "get") {
          message = "确定要领取该客户吗?";
        } else if (type == "transferGet") {
          message = "确定要转入该客户吗?";
        } else if (type == "picking") {
          message = "确定要捡取该工单吗?";
        } else if (type == "accounting") {
          message = "确定要捡取该工单吗?";
        }
        this.$confirm(message, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.confirmHandle(type);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作"
            });
          });
      } else if (type == "add_user") {
        // 团队操作
        this.teamsTitle = "添加团队成员";
        this.teamsDialogShow = true;
      } else if (type == "delete_user") {
        // 团队操作
        this.teamsTitle = "移除团队成员";
        this.teamsDialogShow = true;
      } else if (type == "alloc") {
        // 公海分配操作
        this.allocDialogShow = true;
      }
    },
    confirmHandle(type) {
      console.log(type, "type");
      if (type === "lock" || type === "unlock") {
        var customer_id = this.selectionList.map(function(item, index, array) {
          return item.customer_id;
        });
        crmCustomerLock({
          is_lock: type === "lock" ? "1" : "2",
          customer_id: customer_id
        })
          .then(res => {
            this.$message({
              type: "success",
              message: res.data
            });
            this.$emit("handle", {
              type: type
            });
          })
          .catch(() => {});
      } else if (type === "put_seas") {
        var customer_id = this.selectionList.map(function(item, index, array) {
          return item.customer_id;
        });
        crmCustomerPutInPool({
          customer_id: customer_id
        })
          .then(res => {
            this.$message({
              type: "success",
              message: res.data
            });
            this.$emit("handle", {
              type: type
            });
          })
          .catch(() => {});
      } else if (type === "transform") {
        var leads_id = this.selectionList.map(function(item, index, array) {
          return item.leads_id;
        });
        crmLeadsTransform({
          leads_id: leads_id
        })
          .then(res => {
            this.$message({
              type: "success",
              message: res.data
            });
            this.$emit("handle", {
              type: type
            });
          })
          .catch(() => {});
      } else if (type === "start" || type === "disable") {
        var product_id = this.selectionList.map(function(item, index, array) {
          return item.product_id;
        });
        crmProductStatus({
          id: product_id,
          status: type === "start" ? "上架" : "下架"
        })
          .then(res => {
            this.$message({
              type: "success",
              message: res.data
            });
            this.$emit("handle", {
              type: type
            });
          })
          .catch(() => {});
      } else if (type === "delete") {
        let self = this;
        var ids = this.selectionList.map(function(item, index, array) {
          return item[self.crmType + "_id"];
        });
        let request;
        if (this.crmType == "leads") {
          request = crmLeadsDelete;
        } else if (this.crmType == "customer") {
          request = crmCustomerDelete;
        } else if (this.crmType == "contacts") {
          request = crmContactsDelete;
        } else if (this.crmType == "business") {
          request = crmBusinessDelete;
        } else if (this.crmType == "contract") {
          request = crmContractDelete;
        } else if (this.crmType == "receivables") {
          request = crmReceivablesDelete;
        }
        request({
          id: ids
        })
          .then(res => {
            this.$message({
              type: "success",
              message: res.data
            });
            this.$emit("handle", {
              type: type
            });
          })
          .catch(() => {});
      } else if (type === "get" || type === "transferGet") {
        // 领取
        var customer_id = this.selectionList.map(function(item, index, array) {
          return item.customer_id;
        });
        if (type === "get") {
          crmCustomerReceive({
            customer_id: customer_id
          })
            .then(res => {
              this.$message({
                type: "success",
                message: res.data
              });
              this.$emit("handle", {
                type: type
              });
            })
            .catch(() => {});
        } else {
          crmCustomerPrivateReceive({
            customer_id: customer_id
          })
            .then(res => {
              this.$message({
                type: "success",
                message: res.data
              });
              this.$emit("handle", {
                type: type
              });
            })
            .catch(() => {});
        }
      } else if (type == "picking") {
        let ids = this.selectionList.map(item => {
          return item.contract_id;
        });
        crmWoPicking({
          contract_id: ids
        })
          .then(res => {
            this.$message.success(res.data);
            this.$emit("handle", {
              type: type
            });
          })
          .catch(() => {});
      } else if (type == "accounting") {
        let ids = this.selectionList.map(item => {
          return item.contract_id;
        });
        accountPicking({
          contract_id: ids
        })
          .then(res => {
            this.$message.success(res.data);
          })
          .catch(() => {});
      }
    },
    /** 获取展示items */
    getSelectionHandleItemsInfo() {
      let handleInfos = {
        transfer: {
          name: "转移",
          type: "transfer",
          icon: require("@/assets/img/selection_transfer.png")
        },
        transform: {
          name: "转化为客户",
          type: "transform",
          icon: require("@/assets/img/selection_convert_customer.png")
        },
        export: {
          name: "导出选中",
          type: "export",
          icon: require("@/assets/img/selection_export.png")
        },
        delete: {
          name: "删除",
          type: "delete",
          icon: require("@/assets/img/selection_delete.png")
        },
        put_seas: {
          name: "放入公海",
          type: "put_seas",
          icon: require("@/assets/img/selection_putseas.png")
        },
        lock: {
          name: "锁定",
          type: "lock",
          icon: require("@/assets/img/selection_lock.png")
        },
        unlock: {
          name: "解锁",
          type: "unlock",
          icon: require("@/assets/img/selection_unlock.png")
        },
        add_user: {
          name: "添加团队成员",
          type: "add_user",
          icon: require("@/assets/img/selection_add_user.png")
        },
        delete_user: {
          name: "移除团队成员",
          type: "delete_user",
          icon: require("@/assets/img/selection_delete_user.png")
        },
        alloc: {
          name: "分配",
          type: "alloc",
          icon: require("@/assets/img/selection_alloc.png")
        },
        get: {
          name: "领取1",
          type: "get",
          icon: require("@/assets/img/selection_get.png")
        },
        transferGet: {
          name: "转入意向库",
          type: "transferGet",
          icon: require("@/assets/img/selection_get.png")
        },
        picking: {
          name: "捡取",
          type: "picking",
          icon: require("@/assets/img/selection_get.png")
        },
        accounting: {
          name: "捡取",
          type: "accounting",
          icon: require("@/assets/img/selection_get.png")
        },
        start: {
          name: "上架",
          type: "start",
          icon: require("@/assets/img/selection_start.png")
        },
        disable: {
          name: "下架",
          type: "disable",
          icon: require("@/assets/img/selection_disable.png")
        }
      };
      if (this.crmType == "leads") {
        return this.forSelectionHandleItems(handleInfos, [
          "transfer",
          "transform",
          "export",
          "delete"
        ]);
      } else if (this.crmType == "customer") {
        if (this.isSeas) {
          return this.forSelectionHandleItems(handleInfos, [
            "alloc",
            "get",
            "export"
          ]);
        } else {
          return this.forSelectionHandleItems(handleInfos, [
            "transfer",
            "export",
            "put_seas",
            "transferGet",
            "delete",
            "lock",
            "unlock",
            "add_user",
            "delete_user"
          ]);
        }
      } else if (this.crmType == "contacts") {
        return this.forSelectionHandleItems(handleInfos, [
          "transfer",
          "export",
          "delete"
        ]);
      } else if (this.crmType == "business") {
        return this.forSelectionHandleItems(handleInfos, [
          "transfer",
          "delete",
          "add_user",
          "delete_user"
        ]);
      } else if (this.type == "wo") {
        return this.forSelectionHandleItems(handleInfos, ["picking"]);
      } else if (this.type == "accounting") {
        return this.forSelectionHandleItems(handleInfos, ["accounting"]);
      } else if (this.crmType == "contract") {
        return this.forSelectionHandleItems(handleInfos, [
          "transfer",
          "delete",
          "add_user",
          "delete_user"
        ]);
      } else if (this.crmType == "receivables") {
        return this.forSelectionHandleItems(handleInfos, ["delete"]);
      } else if (this.crmType == "product") {
        return this.forSelectionHandleItems(handleInfos, [
          "export",
          "start",
          "disable"
        ]);
      }
    },
    forSelectionHandleItems(handleInfos, array) {
      var tempsHandles = [];
      for (let index = 0; index < array.length; index++) {
        let type = array[index];
        if (this.whetherTypeShowByPermision(type)) {
          tempsHandles.push(handleInfos[type]);
        }
      }
      return tempsHandles;
    },
    // 判断是否展示
    whetherTypeShowByPermision(type) {
      if (type == "transfer") {
        return this.sceneData.bydata == "is_transform"
          ? false
          : this.crm[this.crmType].transfer;
      } else if (type == "transform") {
        return this.sceneData.bydata == "is_transform"
          ? false
          : this.crm[this.crmType].transform;
      } else if (type == "export") {
        if (this.isSeas) {
          return this.crm[this.crmType].poolexcelexport;
        }
        return this.crm[this.crmType].excelexport;
      } else if (type == "delete") {
        return this.crm[this.crmType].delete;
      } else if (type == "put_seas") {
        // 放入公海(客户)
        return this.crm[this.crmType].putinpool;
      } else if (type == "lock" || type == "unlock") {
        // 锁定解锁(客户)
        return this.crm[this.crmType].lock && this.CRMConfig.config == 1;
      } else if (type == "add_user" || type == "delete_user") {
        // 添加 移除团队成员
        return this.crm[this.crmType].teamsave;
      } else if (type == "alloc") {
        // 分配(公海)
        return this.crm[this.crmType].distribute;
      } else if (type == "get") {
        // 领取(公海)
        return this.crm[this.crmType].receive;
      } else if (type == "transferGet") {
        // 领取(公海)
        return this.crm[this.crmType].receive;
      } else if (type == "picking" || type == "accounting") {
        // 捡取（工单）
        return this.crm[this.type].picking;
      } else if (type == "start" || type == "disable") {
        // 上架 下架(产品)
        return this.crm[this.crmType].status;
      }

      return true;
    },
    // 子组件 回调的 结果
    handleCallBack(data) {
      this.$emit("handle", {
        type: data.type
      });
    },
    // 获取默认场景名字
    getDefaultSceneName() {
      if (this.crmType == "leads") {
        return "全部线索";
      } else if (this.crmType == "customer") {
        return "全部客户";
      } else if (this.crmType == "contacts") {
        return "全部联系人";
      } else if (this.crmType == "business") {
        return "全部商机";
      } else if (this.crmType == "contract") {
        return "全部订单";
      } else if (this.crmType == "receivables") {
        return "全部回款";
      } else if (this.crmType == "product") {
        return "全部产品";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.th-container {
  font-size: 13px;
  height: 50px;
  padding: 0 20px;
}

/** 场景和筛选 */
.condition_title {
  cursor: pointer;
}

.condition_title:hover {
  color: $xr-color-primary;
}

.m-arrow {
  margin: 0 8px;
}

.c-filtrate {
  margin: 0 10px 0 30px;
  width: 12px;
}

/** 勾选操作 */
.selection-bar {
  font-size: 12px;
  height: 50px;
  padding: 0 20px;
  color: #777;

  .selected—title {
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid $--table-border-color;

    .selected—count {
      color: $xr-color-primary;
    }
  }
}

.selection-items-box {
  .selection-item {
    width: auto;
    padding: 15px;

    .selection-item-icon {
      display: block;
      margin-right: 5px;
      width: 15px;
      height: 15px;
    }

    .selection-item-name {
      cursor: pointer;
      color: #777;
    }

    .selection-item-name:hover {
      color: $xr-color-primary;
    }
  }
}
</style>
